<template>
    <div class="demo-date-picker">
          <!-- 搜索表单 -->
          <el-form label-width="auto" style="max-width: 100%">
              <el-row>
                  <el-col :span="5">
              <el-form-item label=" 回访人员:">
                  <el-input
                    v-model="queryDto.name"
                    placeholder="回访人员"
                  ></el-input>
              </el-form-item>
              
              </el-col>
              <el-col :span="8">
              <el-form-item label="糖尿病管理医生:" style="margin-left: 20px;margin-right: 20px">
                      <el-input
                    v-model="queryDto.physician"
                    placeholder="管理医生"
                      ></el-input>
                  </el-form-item>
                  </el-col>
                  <el-col :span="10">
              <el-form-item label="回访日期:">
        <el-date-picker
          v-model="createTimes"
          type="daterange"
          unlink-panels
          range-separator="To"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          :shortcuts="shortcuts"
          :size="size"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
        />
              </el-form-item>
                  </el-col>
                  <el-col :span="8">
                  <el-form-item label="满意度等级:">
                      <el-select
                      v-model="queryDto.slevel"
                      placeholder="满意度等级"
                      size="large"
                      style="width: 240px"
                      >
                      <el-option
                          v-for="item in options"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id"
                      />
                      </el-select>
                  </el-form-item>
              </el-col>
              <el-col :span="8">
                  <el-form-item label="人群管理:">
                      <el-select
                      v-model="queryDto.crowd"
                      placeholder="人群管理"
                      size="large"
                      style="width: 240px"
                      >
                      <el-option
                          v-for="item in crowds"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id"
                      />
                      </el-select>
                  </el-form-item>
              </el-col>
              <el-col :span="8">
              <el-form-item label=" 患者姓名:">
                  <el-input
                    v-model="queryDto.pname"
                    placeholder="患者姓名"
                  ></el-input>
              </el-form-item>
          </el-col>
              </el-row>
              
      <el-row style="display:flex">
          <el-button type="primary" size="small" @click="searchSysRole">
              搜索
          </el-button>
          <el-button size="small" @click="resetData">重置</el-button>
      </el-row>
  </el-form>
  <el-dialog v-model="dialogVisible" :title="tit" width="70%">
          <el-form label-width="120px">
              <el-row :gutter="40">
                  <el-col :span="6">
                   
                    <el-form-item label="回访日期:">
                      <el-date-picker
                      v-model="patient.rvdate"
                      type="datetime"
                      clearable
                    />
              </el-form-item>
              <el-form-item label="回访人员:">
                  <el-input v-model="patient.name"/>
              </el-form-item>
          </el-col>
              <el-col :span="6">
              <el-form-item label="联系方式:">
                  <el-input v-model="patient.phone"/>
              </el-form-item>
          </el-col>
              <el-col :span="6">
                  <el-form-item label="性别:">
                  <el-radio-group v-model="patient.sex">
                      <el-radio :label="1">男</el-radio>
                      <el-radio :label="2">女</el-radio>
                  </el-radio-group>
              </el-form-item>
          </el-col>
          </el-row>
          <el-row :gutter="20">
              <el-col :span="6">
                  <el-form-item label="年龄:">
                      <el-input v-model="patient.age"/>
                  </el-form-item>
              </el-col>
              <el-col :span="6">
                  <el-form-item label="患者姓名:">
                      <el-input v-model="patient.pname"/>
                  </el-form-item>
              </el-col>
          </el-row>
          <el-row :gutter="20">
              <el-col :span="6">
                  <el-form-item label="满意度等级:">
                      <el-select
                      v-model="patient.slevel"
                      placeholder="满意度等级"
                      size="large"
                      style="width: 240px"
                      >
                      <el-option
                          v-for="item in options"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id"
                      />
                      </el-select>
                  </el-form-item>
              </el-col>
              <el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
              <el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
              <el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
          </el-row>
              <el-form-item label="健康管理师:">
                  <el-input  v-model="patient.physician"/>
              </el-form-item>
              <el-form-item>
                  <el-button type="primary" @click="addpatient()">提交</el-button>
                  <el-button @click="dialogVisible = false">取消</el-button>
              </el-form-item>
          </el-form>
      </el-dialog> 
          <!--- 角色表格数据 -->
          <el-table :data="list" style="width: 100%">
              <el-table-column prop="id" label="序号" width="60" />
              <el-table-column prop="rvdate" label="回访日期" width="200" />
              
              <el-table-column prop="name" label="回访人员"  width="90"/>
              
              <el-table-column prop="lname" label="满意度等级" width="100"/>
              <el-table-column prop="cname" label="人群管理" width="80"  />
              <el-table-column prop="pname" label="患者姓名" width="90"/>
              <el-table-column prop="sex" label="性别"  width="60"  #default="scope">
                  {{ scope.row.sex == 1 ? '男' : '女' }}
              </el-table-column>
              <el-table-column prop="age" label="年龄" width="80"  />
              <el-table-column prop="phone" label="联系电话" width="140"  />
              <el-table-column prop="physician" label="健康管理师"  width="100" />
              <el-table-column prop="evaluationContent" label="评价内容"  width="100" />
              <el-table-column label="操作" align="center" width="280" #default="scope">
              <el-button type="primary" size="small" @click="addShow(scope.row)">
                  编辑
              </el-button>
              <el-button type="danger" size="small">
                  档案
              </el-button>
              </el-table-column>
          </el-table>
  
       <!--分页条-->
  <el-pagination
                 v-model:current-page="pageParams.page"
                 v-model:page-size="pageParams.limit"
                 :page-sizes="[2,5,10, 20, 50, 100]"
                 @size-change="fetchData"
                 @current-change="fetchData"
                 layout="total, sizes, prev, pager, next"
                 :total="total"
  />
    </div>
  </template>
  
  <script setup>
  import { ref,onMounted } from 'vue';
  import { useApp } from '@/pinia/modules/app'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import {GetSysRoleListByPage,update,evaluation,crowdsList} from '@/api/zsg/followup';
  const headers = {
    token: useApp().authorization.token     // 从pinia中获取token，在进行文件上传的时候将token设置到请求头中
  }
  // 图像上传成功以后的事件处理函数
  const handleAvatarSuccess = (response,uploadFile) => {
      patient.value.img = response.data
  }
  
  // 分页条总记录数
  let total = ref(0)
  
  // 定义表格数据模型
  let list = ref([
  ])
  let tit=ref("")
  const options=ref({})
  const dialogVisible=ref(false)
  const pageParamsForm={
      page:1,
      limit:2,
  }
  const pageParams = ref(pageParamsForm)     // 将pageParamsForm包装成支持响应式的对象
  // 搜索表单数据
  const queryDto = ref({
  })
  const createTimes=ref({})
  // 页面加载完毕以后请求后端接口获取数据
  onMounted(() => {
      fetchData() ;
      findeval();
      findcrowd();
  })
  // 搜索按钮点击事件处理函数
  const searchSysRole = () => {
      //queryDto.value.roleName = ""
      let initialtime=createTimes.value[0];
      let endtime=createTimes.value[1];
      queryDto.value.initialtime=initialtime;
      queryDto.value.endtime=endtime;
      console.log(queryDto.value)
      fetchData() ;
  }
  const findeval=async()=>{
      const {data , code , message } =  await evaluation();
      options.value=data
  }
  const crowds=ref({})
  const findcrowd=async()=>{
    const {data,code,message} =await crowdsList();
    crowds.value=data
  }
  // 远程调用后端分页查询接口
  const fetchData = async () => {
      const {data , code , message } = await GetSysRoleListByPage(pageParams.value.page , pageParams.value.limit , queryDto.value) ;
      console.log(data)
      list.value = data.list ;
      total.value = data.total
      // for(let a=0;a<=data.list.length;a++){
      //     if(data.list[a].sex=='1'){
      //         list.value[a].sex='男'
      //     }else{
      //         list.value[a].sex='女'
      //     }
          
      // }
  }
  const resetData=()=>{
      queryDto.value={}
      createTimes.value={}
  }
  // 定义提交表单数据模型
  const defaultForm = {
      id:"",
      rvdate:"",
      name: "" ,
      sex:"",
      phone: "" ,
      address:"",
      idNumber:"",
      tag:"",
      physician:"",
      thmanager:"",
      archivalSource:"",
      occupationId:"",
      maritalId:"",
      risk:"",
      img:"",
      url:"",
      slevel:"",
      pname:"",
      physician:"",
  }
  const patient = ref(defaultForm)
  const addShow=(row)=>{
          tit.value="修改"
          dialogVisible.value = true
          patient.value ={...row}
  }
  const addpatient=async()=>{
      const {code , message , data} =  await update(patient.value)
      if(code === 200) {
          dialogVisible.value = false
          ElMessage.success('操作成功')
          fetchData()
      }else {
          ElMessage.error(message)
      }
  }
  </script>
  
  <style scoped>
  
  .search-div {
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #ebeef5;
    border-radius: 3px;
    background-color: #fff;
  }
  
  .tools-div {
    margin: 10px 0;
    padding: 10px;
    border: 1px solid #ebeef5;
    border-radius: 3px;
    background-color: #fff;
  }
  
  
  .el-row {
    margin-bottom: 20px;
  }
  .el-row:last-child {
    margin-bottom: 0;
  }
  .el-col {
    border-radius: 4px;
  }
  
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  
  .avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  
  .avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
  }
  .avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
  }
  .el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
  }
  </style>